<template>
  <a-modal
    :visible="visible"
    title="结转作废"
    @ok="handleSubmit"
    @cancel="handleClose"
    :destroyOnClose="true"
    :confirmLoading="loading"
    okText="保存&发起审批"
  >
    <a-form layout="vertical">
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-item label="作废备注" v-bind="validateInfos.remark">
            <a-textarea
              v-model:value="modelRef.remark"
              placeholder="请输入作废备注"
              :rows="4"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import {defineComponent, reactive, toRefs, watch} from "vue";
import {Form, message} from "ant-design-vue";
import request from "@/common/utils/request";
const useForm = Form.useForm;
import _ from "lodash";
export default defineComponent({
  name: "VoidCarryOverModal",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
    });

    /**
     * @description: 表单字段
     */

    const modelRef = reactive({
      remark: '',
    });

    const rulesRef = reactive({});

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const handleClose = () => {
      emit('handleClose')
    };

    const handleSubmit = () => {
      validate().then(() => {
        state.loading = true;
        let params = {
          ...modelRef,
          task_key: props.id,
        }
        request.post("/org", "/billTransfer/cancelTransfer", params).then((res) => {
          message.success(res?.msg || '操作成功')
          emit('handleSuccess')
          state.loading = false;
        });
      })
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          resetFields();
          state.loading = false;
        }
      }
    );

    return {
      ...toRefs(state),
      validateInfos,
      modelRef,
      handleClose,
      handleSubmit,
    };
  },
});
</script>

<style lang="less" scoped></style>
